<template>
  <div class="like-page">
    <div class="bj">
    </div>
    <div class="div1">
      <div class="div2">
      <img src="http://liufusong.top:8080/img/profile/avatar.png" alt="">
      </div>
      <div class="text">游客</div>
    <router-link class="div3" to="/login"><button>去登录</button></router-link>
    </div>
  <van-grid :column-num="3" class="div4" :border='false'>
  <van-grid-item icon="star-o" to="/login" text="我的收藏" />
  <van-grid-item icon="wap-home-o" text="我的出租" />
  <van-grid-item icon="underway-o" text="看房记录" />
  <van-grid-item icon="ecard-pay" text="成为房主" />
  <van-grid-item icon="user-circle-o" text="个人资料" />
  <van-grid-item icon="service-o" text="联系我们" />
</van-grid>
<div>
  <img  class="div5" src="http://liufusong.top:8080/img/profile/join.png" alt="">
</div>
  </div>
</template>
<script>
// import { getToken } from '@/utils/storage'
export default {
  data () {
    return {

    }
  },
  methods: {
  }
}
</script>

<style lang="less" scoped>
.like-page {
  margin-bottom: 50px;
  margin-top: 44px;
}
.bj{
  background-image: url('http://liufusong.top:8080/img/profile/bg.png');
  width: 100%;
  height: 200px;
  background-size: 100%;
  margin-top: -44px;
  background-repeat: no-repeat;
}
.div1{
  width: 87%;
  height: 165px;
  background-color:white;
  margin: 0 auto;;
  text-align: center;
  margin-top: -70px;
  position: relative;
  box-shadow: 0 0 20px #ccc;
}
img{
  width: 67px;
  height: 67px;
  margin-top: -1px;
}
.div2{
  position: absolute;
  border: 6px solid #f5f5f5;
  border-radius: 50%;
  width: 67px;
  height: 67px;
  margin-top: -40px;
  margin-left: 38%;
}
.text{
position: absolute;
margin: 0 auto;
margin-left: 45%;
margin-top: 35px;
}
button{
  width: 85px;
  height: 35px;
  margin-top: 90px;
  background-color:#21b97a;
  color: white;
  border-radius: 8px;
  border-style: none;
  line-height: 35px;
}
.div4{
  margin-top: 14px;
}
.div5{
  width: 90%;
  height: 80px;
  margin:20px
}
</style>
